<template>
  <div class="w-full h-full flex flex-col">
    <div ref="targetradar" class="flex-1"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { radarIndicator, radarValue } from '../common'
// 获取 dom 实例
const targetradar = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(targetradar.value)
  // 渲染 echarts
  renderChart()

  window.addEventListener('resize', screenAdapter)

})



const screenAdapter = () => {
  if (mChart) {
    mChart.resize()
  }
}

// 渲染图表
const renderChart = () => {

  let option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '0%',
      right: '4%',
      bottom: '3%',
      top: 'middle',
      // containLabel: true
    },
    radar: [//雷达图坐标系组件，只适用于雷达图
      {
        width: '80%',
        height: '80%',
        // shape: 'circle',//设置及雷达图效果
        center: ['50%', '50%'],
        indicator: radarIndicator.value,
        radius: '50%',//b半径
        startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度(可以让内容旋转)
        splitNumber: 3,//指示器轴的分割段数(内部的分割数量)。
        // shape: "circle",//雷达图绘制类型
        axisName: {//雷达图每个指示器名称的配置项
          formatter: "{value}",//使用字符串模板，模板变量为指示器名称 {value}
          color: "#00440E",
          fontSize: '12px'
        },
        splitArea: {  //坐标轴在 grid 区域中的分隔区域，默认不显示。
          areaStyle: {//分隔区域的样式设置。
            // color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
            shadowColor: "rgba(0, 0, 0, 0.2)",
            shadowBlur: 10,
          },
        },
      },
    ],
    series: [
      {
        type: "radar", //雷达图
        // symbol: "rect",//标记的图形。
        // symbolSize: 12,//标记大小
        // lineStyle: {
        //   type: "dashed",
        // },
        data: [
          {
            value: radarValue.value,
            name: "量",
            areaStyle: {
              //设置填充
              color: "#86DC98",
            },
          },
        ],
      },
    ],
  };

  mChart.setOption(option)

}


onBeforeUnmount(() => {
  window.removeEventListener('resize', screenAdapter)
})

// 监听数据的变化，重新渲染图表
// watch(
//   () => props.yData,
//   () => {
//     renderChart()
//   }
// )
</script>

<style lang="scss" scoped></style>
